<template>
  <div>
    <div class="menu" @mouseleave="cateid = null">
      <ul class="menulist">
        <li
          v-for="(ite, key) in catemenu"
          :key="ite.id"
          @mouseenter="
            index = key;
            cateid = ite.id;
          "
          :class="{ active: ite.id == cateid }"
        >
          <router-link to="/category" class="a">{{ ite.name }}</router-link>
          <template v-if="ite.children">
            <router-link
              to="/"
              v-for="it in ite.children"
              :key="it.id"
              style="font-size: 14px"
            >
              {{ it.name }}
            </router-link>
          </template>
          <template v-if="!ite.children">
            <skeleon-view width="50px" height="20px"></skeleon-view>
            <skeleon-view width="50px" height="20px"></skeleon-view>
          </template>
        </li>
        <div class="swiper">
          <h4>
            {{
              categoods && categoods.keys == "cate" ? "分类推荐" : "品牌推荐"
            }}
            <small>根据您的购买或浏览记录推荐</small>
          </h4>
          <ul v-if="categoods && categoods.keys == 'cate'">
            <li v-for="item in categoods.goods" :key="item.id">
              <router-link to="/">
                <img :src="item.picture" />
                <div class="info">
                  <p class="name">{{ item.name }}</p>
                  <p class="desc">{{ item.desc }}</p>
                  <p class="price"><i>¥</i>{{ item.price }}</p>
                </div>
              </router-link>
            </li>
          </ul>
          <ul v-if="categoods.keys && categoods.keys == 'brand'">
            <li v-for="item in categoods.goods" :key="item.id" class="brand">
              <router-link to="/">
                <img :src="item.picture" class="img" />
                <div class="info">
                  <p class="name place">
                    <i class="iconfont icon-dingwei"></i>
                    {{ item.place }}
                  </p>
                  <p class="desc ellipsis">{{ item.name }}</p>
                  <p class="price ellipsis-2">{{ item.desc }}</p>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </ul>
      <!-- 轮播图 -->
      <home-swiper></home-swiper>
    </div>
  </div>
</template>

<script>
import { getBrand } from "@/utils/api/headerapi";
import HomeSwiper from "./HomeSwiper.vue";
export default {
  components: { HomeSwiper },
  data() {
    return {
      index: 0,
      brandlist: [],
      cateid: 0,
    };
  },
  computed: {
    catemenu() {
      let obj = {
        id: "ban",
        name: "品牌",
        children: [
          {
            id: "banid",
            name: "品牌推荐",
          },
        ],
      };
      let list = this.$store.state.category.cate.map((item) => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.splice(0, 2),
        };
      });
      list.push(obj);
      //   console.log(list.goods);
      return list;
    },
    categoods() {
      let obj = {
        keys: "",
        goods: [],
      };
      if (this.index <= 8) {
        //分类数据  cate是取的id名字
        obj.keys = "cate";
        obj.goods = this.$store.state.category.cate[this.index].goods;
      } else {
        // 拿brand的数据
        obj.keys = "brand";
        obj.goods = this.brandlist;
      }
      return obj;
    },
  },
  methods: {
    async getBrandList() {
      let res = await getBrand(6);
      //   console.log(res);
      this.brandlist = res.result;
    },
  },
  mounted() {
    this.getBrandList();
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.active {
  background-color: $xtxColor !important;
}
.menu {
  width: 1240px;
  height: 500px;
  // background: red;
  margin: auto;
  display: flex;
  position: relative;
  .menulist {
    width: 250px;
    height: 500px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 77;
    li {
      width: 250px;
      padding-left: 40px;
      height: 50px;
      line-height: 50px;
      a {
        color: rgb(255, 255, 255);
        font-size: 16px;
      }
    }
    .swiper {
      z-index: 999;
      width: 990px;
      height: 500px;
      // background: rgba(255, 255, 255, 0.5);
      position: absolute;
      left: 250px;
      top: 0;
      display: none;
      padding: 0 15px;
      h4 {
        font-size: 20px;
        font-weight: 400;
        line-height: 80px;
        small {
          font-size: 16px;
          color: #666;
        }
      }
      ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        li {
          width: 310px;
          height: 120px;
          padding: 10px;
          margin: 5px 0;
          border-radius: 5px;
          background: #fff;
          display: flex;
          a {
            width: 100%;
            height: 100%;
            display: flex;
            overflow: hidden;
            .info {
              margin-left: 10px;
              display: flex;
              flex-wrap: wrap;
              width: 100%;
              height: 100%;
              .name {
                font-size: 16px;
                color: #444;
                width: 100%;
                line-height: 1;
                // height: 30px;
                // line-height: 30px;
                white-space: pre-line;
                word-break: break-all;
                word-wrap: break-word;
              }
              .place {
                color: #ccc;
              }
              .desc {
                font-size: 14px;
                color: #ccc;
                width: 150px;
                line-height: 1;
                // height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .ellipsis {
                margin-top: 10px;
                font-size: 22px;
                color: #444;
              }
              .price {
                width: 100%;
                line-height: 1;
                i {
                  font-size: 15px;
                }
                font-size: 24px;
                color: rgb(224, 2, 2);
                font-weight: 600;
              }
              .ellipsis-2 {
                font-size: 16px;
                color: #ccc;
                font-weight: 400;
                margin-top: 10px;
              }
            }
            .img {
              width: 120px;
            }
          }
          &:hover {
            background: #dcfcf4;
          }
        }
      }
    }
  }
}
.menulist:hover .swiper {
  display: block;
}

</style>